<style scoped>
@import '/static/css/cloud.css';
@import '/static/css/tree.css';

    .layout{
        /*border: 1px solid #d7dde4;*/
        background: #ffffff;
        position: relative;
        font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3",FontAwesome,sans-serif;
        overflow: hidden;

    }
        .layout-ceiling{
        background: #ffffff;
        
        overflow: hidden;

    }
     .layout-ceiling-main{
        float: right;
        margin-right: 5%;
        font-size: 17px;
        color: #26C6DA;
    }
    .layout-ceiling-login{
    	background-color:#ffffff;
    	 float: right;
    	 margin-right: 25px;

    }
    .layout-celling-li{
    	padding-right: 20px;
    }
    .layout-celling-font{
    	
    	color:#5C3317;
    	font-size:1.6rem;
    	float: left;
    	margin-left: 15px;

    }
       .layout-nav{

        margin: 0 auto;
        float: right;
        margin-right: 20px;
    }

    .layout-content{
        background-image: url("/static/img/7.jpg");
        background-repeat: no-repeat;
        background-size: 100%;
        min-height: 638px;


    }
/*    .layout-content-main{
        padding: 10px;
    }*/
    .layout-menu-left{
background: #56CCF2;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #2F80ED, #56CCF2);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #2F80ED, #56CCF2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

border:0px solid red;
box-shadow:20px 0px 100px 10px #abcdef  inset;



 


        height:100%;

    }
    .layout-header{
        font-size: 22px;
        font-weight: 400;
        color: #697882;
        margin-top: 20px;
        margin-left: 20px;

    }
    .pacman{
      z-index:999;
      position: absolute;
    	float: left;
    	top: 300px;
    	left: 0px;
    width: 0;
    height: 0;

    border-right: 20px solid transparent;
    border-top: 20px solid #56CCF2;
    border-left: 20px solid #56CCF2;
    border-bottom: 20px solid #56CCF2;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px										;
    }
    .layout-hide-text .layout-text{
        display: none;
    }
    .layout-hide-cloudy .cloudy{
        display: none;
    }
        .ivu-col{
        transition: width .2s ease-in-out;
    }
    .logo{
    	width: 163px;
        height: 170px;

        border-radius: 3px;

    }


</style>
<template>
    <div class="layout"  :class="{'layout-hide-text': spanLeft < 3}">
<!--     	<Row >
    		<Col span="24">
    		<div class="layout-ceiling"> -->
    		 <!-- <Menu mode="horizontal" theme="light" active-name="1" width="auto">
    		      
    		      	<div class="layout-celling-font">
    		      		<Icon type="earth" color="#CD7F32"></Icon>
    		      		Web前端官方网站后台界面
    		      	</div>
                    
                    
                    <div class="layout-ceiling-login">
                          
                       	 	




                         <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="large"/>
                        
                        </div>
                       <div class="layout-nav">

                <MenuItem name="1">
                    <Badge dot>
                    <Icon type="ios-chatbubble-outline" color="#6B4226"></Icon>
                    
                    消息
                      	 </Badge>
                </MenuItem>

                <MenuItem name="2">
                	   <Badge dot>
                	   	<Icon type="ios-bell" color="#6B4226"></Icon>
                   
                    提醒
                </Badge>
                </MenuItem>


                <MenuItem name="3">
                	   
                    <Icon type="ios-keypad" color="#6B4226"></Icon>
                    注销
                
                </MenuItem>


            </div>

             </Menu> -->
 
<!--                    </div>
              
              </Col>
         </Row>  -->
        <Row type="flex">

            <Col :span="spanLeft">
               <div  class="layout-menu-left"  @mouseleave="toggleLeave" v-if="showLeft">

               	<div class="logo" :class="{'layout-hide-cloudy': spanLeft < 3}" @click="returnHomePage()">
               	   <div class="cloudy" >
               	      
               	   </div>
               	   </div>
               	   
                <Menu active-name="1-2" theme="" width="auto" :open-names="['1']">
                    
              
               






                     <div class="trunk" style="position: fixed; left: 155px;top: 656px;font-size: 30px;color: white" ><div style="color: white;font-size: 35px;"><div style="font-size: 35px;color: white"><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div></div><div ><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div></div></div>
                 <div>

                   <div class="clouds_one"></div>
    <div class="clouds_two"></div>
    <div class="clouds_three"></div>
    <div style="font-size: 20px;color: white"> </div>
</div>
                      <MenuItem  v-for="(item,index) in menuList" :key="index" :name="item.menuId" @click.native="getMenuComent(item._url)">
                      	 <Icon  :type="item.icon" :size="iconSize"></Icon>
                 
                         <span class="layout-text">{{item.menuName}}</span>
                     </MenuItem>
                       
                        <!-- <MenuItem name="2" @click.native="click()" >
                             <Icon type="ios-chatboxes-outline" :size="iconSize"></Icon>
                            <span class="layout-text">申请实验室</span>
                            </MenuItem>
                             <MenuItem name="2" @click.native="WeekAnnalsclick()">
                             <Icon type="ios-chatboxes-outline" :size="iconSize"></Icon>
                            <span class="layout-text">任务周志</span>
                            </MenuItem>
                             <MenuItem name="2" @click.native="Journalclick()">
                             <Icon type="ios-chatboxes-outline" :size="iconSize"></Icon>
                            <span class="layout-text">技术日志</span>
                            </MenuItem> -->
                
                </Menu>
                </div>
            </Col>
            <Col :span="spanRight" class=layout-content >
                	
<!--              <div class="layout-header">
             	后台管理界面

             </div> -->

                <div class="layout-content">
                   <div class="pacman" v-if="pacman" @mouseenter="toggleFocus">
               	   	
               	   </div>
                     <div class="sky" v-if="showPic">

    <div class="clouds_one"></div>
    <div class="clouds_two"></div>
    <div class="clouds_three"></div>
    <div style="font-size: 20px;color: white"> </div>
</div>
                       <router-view></router-view>
                </div>
                
                
            </Col>
        </Row>
   </div>
</template>

<script>
	import menuList from '../../assets/menu.json'
    export default {
        data: function () {
        	return{
                showPic:false,
        spanLeft:3,
        spanRight:21,
        menuList:[],
        showLeft:true,
        pacman:false
         }
        },
        computed: {
            iconSize () {
                return this.spanLeft === 3 ? 14 : 24;
            }
        },
        methods:{
        	// click() {
        	//      this.showPic=false;
        	// 	// this.$router.push('/MenuManagement/Home')
        	// 	this.$router.push("/BackHome/ApplyLaboratoryList")
        	// },
        	returnHomePage(){
                this.showPic=true;
            	this.$router.push('/BackHome');
            },
            // WeekAnnalsclick(){
            //     this.showPic=false;
            // 	this.$router.push("/BackHome/WeekAnnals");
            // },

            toggleFocus(){
            	    this.spanRight = 21;
                    this.pacman=false;
                    this.showLeft=true;
                    this.spanLeft = 3;
                    
                    
                    
                
            },
            toggleLeave(){
                    this.pacman=true;
                    this.showLeft=false;
                    this.spanRight = 24;
                   
                },

            // Journalclick (){
            //     this.showPic=false;
            //     this.$router.push("/BackHome/Journal");
            // },
            getMenuComent(url){
            	console.log(url);
            	this.showPic=false;
            	 this.$router.push(url);
            }
        
        },
       created(){
       	this.menuList=menuList;
       	this.returnHomePage();

       }
    }
</script>